Ccay.Module.define("Ccay.example.ui.chart.jqplot",function(page,$S){
	page.ready=function(){
		$S("#barDemo").ccayTab({
			fnAfterSelectItem: function(tabId){
				if(tabId == 'chart' && !$S("#chart").hasClass("jqplot-target")){
					renderLineChart();
				}else if(tabId == 'chart1' && !$S("#chart1").hasClass("jqplot-target")){
					renderLineChart2();
				}else if(tabId == 'chart2' && !$S("#chart2").hasClass("jqplot-target")){
					renderLineChart3();
				}
			}
		});	
	}
	/*
	 * 折线图  示例 一
	 */
	var renderLineChart = function(){
		$("#chart").chart2({
			ajax:{
				url: 'ccay/example/ui/chart/datas2.json'
			},
			convertArrayType: 2,
		    convertFields:['profit','total'],
    	    skin: {
			    axesDefaults: {
			      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
			    },
			    seriesDefaults: {
			    	 showMarker:false,
			         pointLabels: { show:true } 
			    },
			    series:[{label:'月度利润'},
			            {label:'月度销售额'}
			           ],
			    highlighter : Ccay.UI.Chart.defaultHighlighter,
			    legend: { show:true }
    	    },
    	    click: function (ev, seriesIndex, pointIndex, data) {
				Ccay.UI.topBox("The seriesIndex is {0}, pointIndex is {1}, x is {2}, y is {3}. 注册 click 事件并显示明细数据或者Chart可以达到钻取的效果。".formatValue( seriesIndex, pointIndex , data[0], data[1]));
            }
		});
	}
	/*
	 * 折线图  示例 二
	 */
	var renderLineChart2 = function(){
		$("#chart1").chart2({
			ajax:{
				url:'ccay/example/ui/chart/datas2.json'
			},
			fnConvert:function(item){
				var result = [];
				var temp1 = [];
				var temp2 = [];
				var temp3 = [];
				for (var idx = 0; idx < item.length; idx++) {
					temp1.push(item[idx]['profit']);
					temp2.push(item[idx]['total']);
					temp3.push(temp2[idx]-temp1[idx]);
				}
				result.push(temp1);
				result.push(temp2);
				result.push(temp3);
				
				return result;
	        },
			skin: {
				axesDefaults: {
				      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
				    },
				    seriesDefaults: {
				    	 showMarker:false,
				         pointLabels: { show:true } 
				    },
				    series:[{label:'月度利润'},
				            {label:'月度销售额'},
				            {label:'月度支出'}
				           ],
				    highlighter : Ccay.UI.Chart.defaultHighlighter,
				    legend: { show:true }
			}
			
		});
	}
	/*
	 * 曲线图
	 */
	var renderLineChart3 = function(){
		var data = []; 
		for (var i=0; i<12.4; i+=0.1){ 
			data.push([i, Math.cos(i)]); 
		} 
		$("#chart2").chart2({  
		 	data: [data],
		    seriesDefaults: {
				showMarker:false,
				pointLabels: { show:true } 
			},
		    skin:{
		    	axesDefaults: {
					labelRenderer: $.jqplot.CanvasAxisLabelRenderer
				},
		        series:[
                	{label:'月度利润'}
                ],
		        highlighter : Ccay.UI.Chart.defaultHighlighter,
		        legend: { show:true }
		   }
		});
	}
})